昨天練習了ViewType，用以判斷不同的資料使用不同的itemView，現在要來實作頁面切換，需要建立一個menu欄位放頁面切換的按鈕，在設定按鈕被點選時要顯示不同的RecycleView樣式。

使用：LayoutManager、menu_item、vector

建立Menu
menu做法可以參考之前寫的Day 2 ─用Kotlin做Tap Counter計數器 (2) Menu，res先按右鍵新增一個sample Data Directory資料夾，裡頭新增一個命名為menu的xml檔案，記得Resource Type要選menu。

特別提一下Menu Item的設計，這次三個Icon兩個使用內建、一個是自己去網路上抓取，內建圖示點icon圖就可以搜尋，自製的則要費一番功夫：

1. 到free vector icons找喜歡的樣式，這次是打關鍵字「grid」找
2. 找到後選擇顏色及下載樣式，要點SVG檔
3. 在res/drawable右鍵新增一個Vector Asset，因為只讀的到SVG、PSD兩種檔案類型，選擇剛剛存的SVG檔
4. 會出現在drawable夾裡

設定MainActivity
有了icon圖示之後，新增三個在右上角的 Menu Item，這時候可以去MainActivity設定：

1. 顯示menu.xml的畫面：導入Menu與MenuInflater兩個類別，在onCreateOptionsMenu()事件裡以MenuInflater類別指定選單

• onCreateOptionsMenu(menu: Menu?): Boolean
• getMenuInflater(): MenuInflater

2. 處理選單的事件

• onOptionsItemSelected(item: MenuItem): Boolean
• getItemId

3. 把程式碼寫在onOptionsItemSelected實作方法下面
4. Id綁定：item.itemId == R.id.menu_item

override fun onCreateOptionsMenu(menu: Menu?): Boolean {
    menuInflater.inflate(R.menu.menu, menu)
    return super.onCreateOptionsMenu(menu)
}

override fun onOptionsItemSelected(item: MenuItem?): Boolean {
    when(item?.itemId){
        R.id.menu_list->{
            //menu_list要做的事
        }
        R.id.menu_grid->{
            //menu_grid要做的事
        }
        R.id.menu_staggered->{
            //menu_staggered要做的事
        }
    }
    return super.onOptionsItemSelected(item)
}

頁面切換
昨天已經在Adapter做好不同資料的畫面，現在只要把RecycleView呈現出來。這是我們前天寫的code，簡單三行就把RecycleView呈現出來：

title = "最初的code"

val Adapter = MyAdapter()
recycleView1.layoutManager = LinearLayoutManager(this: Context)
recycleView1.adapter = Adapter

可以發現讓RecycleView呈現的基本兩件事，就是將LayoutManager和Adapter指給RecycleView，更仔細去想，其實做這個切換RecycleView樣式的練習，用到的Adapter是一樣的，只要改變Layout顯示方式就好：

了解LayoutManager
RecyclerView中Item的佈局管理工具，控制Item的位置、顯示、大小、滾動等等，有以下幾種佈局和構造：

• Context---初始化
• orientation---方向，默認垂直(RecyclerView.VERTICAL)和水平(RecyclerView.HORIZONTAL)
• reverseLayout---是否倒序，設置True
• spanCount---列數

1. LinearLayoutManager

LinearLayoutManager(context: Context!)
//默認Vertical的佈局
LinearLayoutManager(context: Context!, orientation: Int, reverseLayout: Boolean)

LinearLayoutManager(context: Context!, attrs: AttributeSet!, defStyleAttr: Int, defStyleRes: Int)

• GridLayoutManager

GridLayoutManager(context: Context, spanCount: Int)
GridLayoutManager(context: Context,
spanCount: Int, orientation: Int, reverseLayout: Boolean)
GridLayoutManager(context: Context, attrs: AttributeSet!, defStyleAttr: Int, defStyleRes: Int)

• StaggeredGridLayoutManager

StaggeredGridLayoutManager(spanCount: Int, orientation: Int)
StaggeredGridLayoutManager(context: Context, attrs: AttributeSet!, defStyleAttr: Int, defStyleRes: Int)

步驟一：寫RecycleView.LayoutManager變化的function
既然了解LayoutManager種類作用，就可以來寫頁面呈現的變化，設一個名為「switchLayout」的function，參數mode為Int值，當mode為1時呈現LinearLayout、當mode為2時呈現GridLayout、當mode為3時呈現瀑布流：

fun switchLayout(mode: Int){
    when(mode){
        1->{
            recycleView2.layoutManager = LinearLayoutManager(this)
        }
        2->{
            recycleView2.layoutManager = GridLayoutManager(this,2)
        }
        3->{
            recycleView2.layoutManager = StaggeredGridLayoutManager(2, StaggeredGridLayoutManager.VERTICAL)
        }
    }

步驟二：Menu Item 設定
三個按鈕點擊之後，分別做不同的事件：

when(item?.itemId){
    R.id.menu_list->{
        switchLayout(1)
        return true
    }
    R.id.menu_grid->{
        switchLayout(2)
        return true
    }
    R.id.menu_staggered->{
        switchLayout(3)
        return true
    }
}

步驟三：預設畫面
最後一步，只要把預設的畫面放在onCreate下方就好

override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    setContentView(R.layout.activity_main2)
    //預設畫面是LinearLayout
    switchLayout(1)

複習一下，其實今天做的東西不多，就是使用到Menu和按鈕設定，最主要工作就是把switchLayout的函式寫好，指給各個按鈕、呈現RecycleView樣式變化囉～